import { Table, Input, Button, Select, message,Icon,Modal} from 'antd';
import HttpUtil from '../../lib/utils/HttpUtil';
import ${className}Form from './${className}Form';
import Pubsub from 'pubsub-js';

const confirm = Modal.confirm;
class ${className}Table extends React.Component {

  constructor(props){
    super(props);
    this.state = {
        data:[],
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
          showQuickJumper: true,
        },
        editItem:{
        /*
         * 删除无用属性（修改and新增） TODO
         */
        <#list columnInfoList as columnInfo>
          <#if columnInfo_has_next>
            ${columnInfo.lowerCamelName}:"",
          <#else>
            ${columnInfo.lowerCamelName}:""
          </#if>
        </#list>
        },
        editItemVisible:false,
        loading:false,
        selectedRowKeys: []
    }


  }


  componentDidMount() {
        this.doSearch();

        this.pubsub_token = Pubsub.subscribe('setData', function (topic,response) {
          const { result, totalCount, pageSize, pageIndex } = response;
          this.setState({
            data:result,
            pagination:{
              pageIndex:pageIndex,
              pageSize:pageSize,
              total:totalCount
            },
            loading:false
          });
        }.bind(this));
  }
  componentWillUnmount() {
      Pubsub.unsubscribe(this.pubsub_token);
  }

  onPageSizeChange = pageSize => {
        this.doSearch(1, pageSize);
  }

  onCurPageChange = curPage => {
        this.doSearch(curPage);
  }

  doSearch = (curPage, size) =>{
        var params = {
          pageIndex:curPage || this.state.pagination.pageIndex,
          pageSize:size || this.state.pagination.pageSize
        }
        Pubsub.publish('search', params);
  }

  delete = (item) => {
    confirm({
      title: '删除',
      content: '确定删除？',
      onOk() {
        let ${pkName} = item.${pkName};
        HttpUtil.delete("/${lowerClassName}/"+${pkName}).then((response)=>{
          message.success(response);
          Pubsub.publish('search');
        },(result)=>{
          message.error(result.message);
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  edit = (item) =>{
    let ${pkName} = item.${pkName};
    HttpUtil.get("/${lowerClassName}/"+${pkName}).then((response)=>{
      this.setState({
        editItemVisible:true,
        editItem:response
      });
    },(result)=>{
      message.error(result.message);
    })
  }

  new${className} = () =>{
    this.setState({
      editItemVisible:true,
      editItem:{}
    });
  }

  onSelectChange = (selectedRowKeys) =>{
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }

  render() {
    {/*
     * 删除无用列 TODO
     */}
    const columns = [
    <#list columnInfoList as columnInfo>
      {
        title: '${columnInfo.remark!'占位符####'}',
        dataIndex: '${columnInfo.lowerCamelName}',
        key: '${columnInfo.lowerCamelName}'
      },
    </#list>
      {
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: (text,item) => {
          return (
            <span>
                <a href="javascript:;" onClick={()=>this.delete(item)}><Icon type="delete" /></a>
                &nbsp;&nbsp;
                <a href="javascript:;" onClick={()=>this.edit(item)}><Icon type="edit" /></a>
              </span>
          );
        }
      }
    ];

    var pagination = Object.assign({
            onChange: this.onCurPageChange,
            showTotal: () =>
                <span>
                    <span style={{color: '#999'}}>
                        每页显示
                        <Select
                            value={`${r'${this.state.pagination.pageSize}'}`}
                            onChange={this.onPageSizeChange}
                            size="default"
                            style={{
                            width: 60,
                            margin: '0 5px'
                        }}>
                            <Select.Option value="10">10</Select.Option>
                            <Select.Option value="20">20</Select.Option>
                            <Select.Option value="30">30</Select.Option>
                            <Select.Option value="40">40</Select.Option>
                            <Select.Option value="50">50</Select.Option>
                        </Select>
                        条，
                    </span>
                    共{this.state.pagination.total}条
                </span>
        }, this.state.pagination);


    const {selectedRowKeys } = this.state;

    return (
      <div>
      <div className="table-operations">
        <Button type="primary" onClick={()=>this.new${className}()}>新增</Button>
      </div>
        <Table
        bordered
        columns={columns}
        dataSource={this.state.data}
        rowKey="${pkName}"
        pagination={pagination}
        />
        <${className}Form onClose={ () => this.setState({editItemVisible:false}) } visible={this.state.editItemVisible} editItem={this.state.editItem}/>
      </div>
      );
  }
}
export default ${className}Table
